<template>
  <div>
    <van-field
      readonly
      clickable
      v-bind="$attrs"
      :is-link="$attrs.disabled === undefined"
      v-model="value"
      input-align="left"
      error-message-align='left'
      class="dh-cell"
      @click="onShowPicker"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-datetime-picker
        show-toolbar
        v-model="pickerValue"
        :title="$attrs.title ? $attrs.title : '选择时间'"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      >
      </van-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "VanTimePickerInput",
  props: {
    value: {
      type: String,
      default: new Date()
    },
    minDate: {
      type: Date,
      default: () => {
        let time = new Date()
        time.setFullYear(time.getFullYear() - 10)
        return new Date(time)
      }
    },
    maxDate: {
      type: Date,
      default: () => {
        let time = new Date()
        time.setFullYear(time.getFullYear() + 10)
        return new Date(time)
      }
    }
  },
  data () {
    return {
      showPicker: false,
      pickerValue: ''
    }
  },
  methods: {
    onShowPicker () {
      this.pickerValue = (this.value ? new Date(this.value) : new Date())
      this.showPicker = true
    },
    onConfirm () {
      this.showPicker = false
      this.$emit('confirm', this.pickerValue)
    }
  }
}
</script>

<style scoped>

</style>
